<template>
  <div>
    <div class="container-body w">
      <Row :gutter="16">
        <div>
          <Col span="24">
            <Card style="border-radius:0;border:none;">
              <div class="recruittop">
                <h3 class="title">{{partinfo.posttitle}}</h3>
                <div class="minfo">
                  <span class="salary">{{partinfo.salary}} 元/{{dbase.salaryunitarr[partinfo.salaryunitindex]}}</span>
                </div>
                <div class="wel" >
                  <span>{{dbase.paymodearr[partinfo.paymodeindex]}}</span>
                  <span>招{{partinfo.recruitnum}}人</span>
                  <span>{{partinfo.time}}</span>
                </div>
                <div class="bottom">
                  <!-- 拨打电话 -->
                  <button class="btn call" @click="oncall">拨打电话</button>
                  <!-- 申请职位 -->
                  <button class="btn postjl" @click="onpostjl">申请职位</button>
                </div>
              </div>
            </Card>
          </Col>
        </div>
      </Row>
    </div>
    <div class="container-body w" style="background: #f1f1f1;">
      <Row type="flex" justify="space-between" class="code-row-bg">
        <Col span="17" style="background: #fff;">
          <Card style="border-radius:0;border:none;">
            <div class="rdetail">
              <h3 class="title">职位详情</h3>
              <span class="grayline"></span>
              <div class="des">{{partinfo.des}}</div>
              <h3 class="title">工作地址</h3>
              <span class="grayline"></span>
               <div class="des">{{partinfo.adress}}</div>
            </div>
          </Card>
        </Col>
        <Col span="6" style="background: #fff;">
          <Card style="border-radius:0;border:none;" v-if="partinfo.cominfo">
            <div class="rdetail" style="text-align:center">
              <h3 class="title">发布者</h3>
              <span class="grayline"></span>
              <ul class="ul" v-if="partinfo.cominfo">
              <li>
                <span>公司名: {{partinfo.cominfo.comname }}</span>
              </li>
              <li>
                <span>公司规模: {{dbase.compnayscale[partinfo.cominfo.compnayscaleindex]}}</span>
              </li>
              <li>
                <span>公司性质: {{dbase.companykind[partinfo.cominfo.comkindindex]}}</span>
              </li>
              <li>
                <span>所在行业: {{dbase.compnayindustry[partinfo.cominfo.compnayindustryindex]}}</span>
              </li>
            </ul>
            <ul class="ul" v-else>
              <li>
                <span>个人发布者</span>
              </li>
            </ul>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
    <!-- 弹窗 -->
    <div class="sys-tips" v-show="tipsshow">
      <div class="inner">
        <div class="status">
          <div class="status-img">
            <img :src="statusimg">
          </div>
        </div>
        <div class="bd">
          <div class="text1 ellips1">{{text1}}</div>
          <div class="text2 ellips2">{{text2}}</div>
          <div class="btn-group">
            <div class="sbtn" @click="tipstoggle">{{suretext}}</div>
          </div>
        </div>
        <div class="close">
          <!-- <img src="/static/images/close.png" mode="" @click="tipstoggle" /> -->
        </div>
      </div>
    </div>
    <!-- 选择多余的简历 -->
    <Modal v-model="modal2" width="360" footer-hide="true">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>请选择您的简历</span>
      </p>
      <Form ref="formValidate" :model="formValidate">
        <div style="text-align:center">
          <FormItem label="招聘标题" prop="title">
            <Input placeholder="输入企业名"></Input>
          </FormItem>
          <FormItem label="简历" prop="rindex">
            <Select style="width:200px">
              <Option v-for="(item,index) in resumearr" :key="index" :value="index">{{item}}</Option>
            </Select>
          </FormItem>
          <Button
            type="error"
            size="large"
            long
            :loading="modal_loading"
            @click="onResumeSure('formValidate')"
          >确认</Button>
        </div>
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
        partinfo:{},
         dbase: [],

      tipsshow: false,
      text1: "",
      text2: "",
      suretext: "我知道啦",
      statusimg: "",
      resumearr: [],
      rid: "",

      modal2: false,
      modal_loading: false,

      formValidate: {
        rindex: "",
        title: ""
      }
    };
  },
  created() {
    console.log(this.$route.query.pid);
    var that = this,
      pid = that.$route.query.pid;
    console.log(pid);
    that.$http.aget("partjobiteminfo", {pid: pid }).then(res => {
      console.log(res);
      this.partinfo = res;
        this.zid = res.id;
      this.cid = res.cominfo.id;
      this.comuid = res.cominfo.uid;
      this.isc = res.isc;
    });
    that.$axios.get(that.$http.apiurl('mpinfo')).then(res => {
      that.dbase = res.data.dbase;
    });

    if (localStorage.getItem("user_info")) {
      this.$http
        .aget("myresume", {
          uid: localStorage.getItem("user_info").id
        })
        .then(res => {
          console.log(res);
          if (res == 0) {
            this.resumearr = [];
          } else {
            this.resumearr = res;
            this.rid = res[0].id;
          }
        });
    } else {
      this.resumearr = [];
    }
  },
  methods: {
     oncall() {
      this.tipsshow = true;

      (this.text1 = this.partinfo.cominfo.tel),
        (this.text2 = "拨打电话"),
        (this.suretext = "我知道啦"),
        (this.statusimg = "/static/images/status-suc.jpg");
    },
    onpostjl() {
      var that = this;
      if (this.partinfo.isting == 0) {
        that.$Message.error("该职位已经停招!");
      } else if (!localStorage.getItem("user_info")) {
        that.$Message.error("未登陆,请登陆!");
        that.$router.push({ name: "login", query: {} });
      } else if (this.resumearr.length < 1) {
        that.$Message.error("您未创建简历,请创建简历");
        that.$router.push({ name: "resume", query: {} });
      } else if (this.resumearr.length == 1) {
        this.postresume();
      } else {
        this.modal2 = true;
      }
    },
    postresume() {
      this.$http
        .aget("subpartjob", {
          rid: this.rid,
          zid: this.zid,
          cid: this.cid,
          uid: localStorage.getItem("user_info").id,
          isc: this.isc,
          comuid: this.comuid
        })
        .then(res => {
          console.log(res);
          if (res > 0) {
            // 提交成功
            this.tipsshow = true;
            (this.text1 = "简历提交成功"),
              (this.text2 =
                "恭喜,简历提交成功,请耐心等待通知,再去申请其他职位试试!"),
              (this.suretext = "我知道啦"),
              (this.tipsmode = 1),
              (this.statusimg = "/static/images/status-jianli.jpg");
            this.modal2 = false;
          } else {
            that.$Message.error("提交失败!");
            this.modal2 = false;
          }
        });
    },
    onResumeSure() {
      var full = this.formValidate;
      this.rid = this.resumearr[full.rindex].id;
      console.log(full);
      this.modal_loading = true;
      this.postresume();
    },
    tipstoggle() {
      this.tipsshow = false;
    }
  }
};
</script>
<style lang="scss">
body {
  background-color: #f1f1f1;

  .container-body {
    background-color: #fff;
    margin: 30px auto;
    padding-bottom: 0;
  }

  .recruittop {
    text-align: left !important;

    .title {
    }

    .minfo {
      color: #999;
      font-size: 15px;
      line-height: 28px;

      .salary {
        font-size: 20px;
        font-weight: 600;
        color: red;
      }
    }

    .bottom {
      display: flex;

      .btn {
        width: 210px;
        height: 50px;
        border-radius: 5px;
        font-size: 22px;
        text-align: center;
        line-height: 50px;
      }

      .call {
        background-color: blue;
        color: #fff;
      }

      .postjl {
        background-color: red;
        color: #fff;
        margin-left: 20px;
      }
    }
  }
}

.rdetail {
  text-align: left !important;

  .des {
    margin: 20px 0;
  }
}
.wel {
  margin-top: 3px;
  color: #999;

  span {
    display: inline-block;
    height: 26px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 26px;
    color: #999;
    border: 1px solid #f0f0f0;
    border-radius: 3px;
    text-align: center;
  }
}
.ul {
  li {
    margin-top: 10px;
  }
}
</style>

